<script setup lang="ts">
// vue3
import { ref, computed, onMounted, onUnmounted } from 'vue'
// 封装组件
import Navbar from './components/Navbar.vue';
import Swipar from "@/components/Swaper.vue"
import CategoryPanel from './components/CategoryPanel.vue';
import Xsms from './components/Xsms.vue';
import Thpt from './components/Thpt.vue';
import ShopList from './components/ShopList.vue';    
// API方法
import { getCategoryTopAPI, getlunboAPI } from '@/http/Lzl';
// Type类型
import type { HomeCateItem } from '@/types/Home'

const CateList = ref<HomeCateItem[]>([])
const lunbolist = ref([])

const getcategoryList = async () => {
    let res = await getCategoryTopAPI()
    CateList.value = res.data.filter(item => item.fid == null && item.title != '其他')
}

const getlunbo = async () => {
    let res = await getlunboAPI()
    lunbolist.value = res.data[0].img
    // console.log(res.data[0].img);
    
}

onMounted(() => {
    // loadInitialData()
    getlunbo()
    getcategoryList()
})
// @scroll="handleScroll"
</script>

<template>
    <div class="home" >
        <Navbar />
        <Swipar :item="lunbolist" :imgheight="11.3372" />
        <CategoryPanel :list="CateList" />
        <Xsms />
        <ShopList />
    </div>
</template>

<style scoped lang="less">
.home {
    height: calc(100vh - 50px);
    overflow-y: auto;
    position: relative;
    border: 1px solid #ccc;
    background-color: #f7f7f7;
}

.virtual-list-phantom {
    position: absolute;
    left: 0;
    /* top: 0; */
    right: 0;
    z-index: -1;
}

.virtual-list-content {
    position: absolute;
    left: 0;
    right: 0;
    /* top: 0; */
}

.list-item {
    padding: 10px;
    display: flex;
    align-items: center;
    background-color: #fff;
    margin: .5669rem;
    border-radius: .5669rem;

    .right {
        margin-left: .5669rem;
    }
}

.loading {
    text-align: center;
    padding: 10px;
    color: #999;
}
</style>